import React,{lazy, Suspense} from 'react';
import { useSelector } from 'react-redux';
var NotFound = lazy(()=>import('../views/NotFound'))

interface Props {
  perm:string,
  children:any
}

// 组件内需要传入一个权限标识(key),传入需要验证的组件,判断当前组件的权限标识是否在当前登录用户的权限列表中 
function AuthComponent(props:Props) {

  // 获取store中的用户权限列表
  var checkedkeys = useSelector((state:any)=>state.userInfo.checkedkeys)
  // 判断当前组件的权限标识是否在当前登录用户的权限列表中 
  var res = checkedkeys.length == 0 || checkedkeys.includes(props.perm)

  return (
    <Suspense fallback={<div className='loading'><img src="https://img.zcool.cn/community/01415f5996acdaa8012156038f6b78.gif" alt="" /></div>}>
      { res ? props.children : <NotFound/>} 
    </Suspense>
  );
}

export default AuthComponent;